<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<%@include file="/public/environment.jspf"%>
<script type="text/javascript">
	$(function() {
		$(".remove").click(function() {
			var $tr = $(this).parents("tr");
			if (confirm("是否确认删除?")) {
				$.post("sorder_delete.action", {
					'product.id' : $tr.attr("lang")
				}, function(total) {
					$tr.remove();
					$(".total").text(total);
					$("#total").text(total);
				}, "text");
			}
		});
		$("#deleteAll").click(function(){
			if(confirm("是否要确认清空?")){
				$.post("sorder_deleteAll.action",{},function(data){
					if(data == "true"){
						$(".data-table").remove();
						$(".total").text(0.00);
						$("#total").text(0.00);
					}
				},"text");
			}
		});
		//注册事件
		$(".text").change(function(){
			//验证数据的有效性,必须是自然数(>0)
			var number = this.value;
			if(!isNaN(number)&&parseInt(number)==number&&number>0){
				if(number!=$(this).attr("lang")){
					//更新合法数据的值
					$(this).attr("lang",number);
					var pid = $(this).parents("tr:first").attr("lang");
					//发送Ajax请求,传输当前的数量与商品的id,返回的总价格
					$.post("sorder_updateSorder.action",{number:number,'product.id':pid},function(total){
						$(".total").text(total);
						$("#total").text(total);
					},"text");
					//商品小计(单个)
					var price = (($(this).parent().prev().text().substring(1))*number).toFixed(2);
					//更新单个商品小计
					$(this).parent().next().text("￥"+ price);
				}
			}else{
				this.value = $(this).attr("lang");
			}
		
		});
	});
</script>
<body>
	<div class="wrapper">
		<jsp:include page="/include/header.jsp"></jsp:include>
		<!-- 头部结束 -->
		<!-- 导航栏 -->
		<jsp:include page="/include/navigater.jsp"></jsp:include>
		<!--导航栏结束-->
		<div class="section_container">
			<!-- 购物车 -->
			<div id="shopping_cart">
				<div class="message success">我的购物车</div>
				<table class="data-table cart-table" cellpadding="0" cellspacing="0">
					<tr>
						<th class="align_center" width="10%">商品编号</th>
						<th class="align_left" width="35%" colspan="2">商品名称</th>
						<th class="align_center" width="10%">销售价格</th>
						<th class="align_center" width="20%">数量(可更改)</th>
						<th class="align_center" width="15%">小计</th>
						<th class="align_center" width="10%">删除</th>
					</tr>
					<c:forEach items="${sessionScope.forder.sorderList}" var="sorder">
						<tr class="data-table" lang="${sorder.product.id }">
							<td class="align_center"><a href="#" class="edit">${sorder.product.id}</a>
							</td>
							<td width="80px"><img
								src="${shop}/image/${sorder.product.pic}" width="80" height="80" />
							</td>
							<td class="align_left"><a class="pr_name" href="#">${sorder.name }</a>
							</td>
							<td class="align_center vline">￥${sorder.price}</td>
							<td class="align_center vline">
								<!-- 文本框 -->
								<input class="text" style="height: 20px;" value="${sorder.number}" lang="${sorder.number}">
							</td>
							<td class="align_center vline">￥${sorder.number*sorder.price}</td>
							<td class="align_center vline"><a href="#" class="remove"
								title="${sorder.product.id}"></a></td>
						</tr>
					</c:forEach>
				</table>
				<!-- 结算 -->
				<div class="totals">
					<table id="totals-table">
						<tbody>
							<tr>
								<td width="60%" colspan="1" class="align_left"><strong>小计</strong>
								</td>
								<td class="align_right" style="">￥<span
										class="price" id="total">${sessionScope.forder.total}</span></td>
							</tr>
							<tr>
								<td width="60%" colspan="1" class="align_left">运费</td>
								<td class="align_right" style=""><span class="price">￥0.00</span>
								</td>
							</tr>
							<tr>
								<td width="60%" colspan="1" class="align_left total"><strong>总计</strong>
								</td>
								<td class="align_right" style="">￥<span class="total">${sessionScope.forder.total}
								</span></td>
							</tr>
						</tbody>
					</table>
					<div class="action_buttonbar">
						<button type="button" title="" class="checkout fr"
							style="background-color: #f38256;">
							<font><a href="${shop}/user/confirm.jsp">订单确认</a></font>
						</button>
						<button type="button" title="" class=" fr" id="deleteAll">
							<font><font>清空购物车</font> </font>
						</button>
						<button type="button" title="" class="continue fr">
							<font><a href="${shop}/index.jsp">继续购物</a></font>
						</button>
						<div style="clear:both"></div>
					</div>
				</div>
			</div>
		</div>
		<!-- 导航栏结束 -->
		<jsp:include page="/include/footer.jsp"></jsp:include>
	</div>
</body>
</html>
